<template>
	<view class="qalist_pages">
		<view class="voteq_box">
			<view v-if="info.id">
				<view class="qalist_xiong_box">
					<image v-if="stage_id==6" class="xiong1" :src="onlinePic+'answer/1.png'"></image>
					<image v-if="stage_id==7" class="xiong2" :src="onlinePic+'answer/2.png'"></image>
					<image v-if="stage_id==8" class="xiong3" :src="onlinePic+'answer/3.png'"></image>
				</view>
				<view class="qalist_block_top_box">
					<view class="qalist_block_title">
						{{info.title}}
						<view class="time_box">
							已用时
							<view v-if="seconds<1000" class="time_badge" style="width: 70rpx">{{seconds}}S</view>
							<view v-if="seconds<10000&&seconds>999" class="time_badge" style="width: 90rpx">{{seconds}}S
							</view>
						</view>
					</view>
					<view class="qalist_block_desc" v-if="info.desc">
						<view>
							<text>{{info.desc}}</text>
						</view>
					</view>
				</view>
				<view class="rank_popup_link_box">
					<image class="rank_popup_link" :src="onlinePic+'answer/link_block.png'" mode="widthFix"></image>
				</view>
				<view class="qalist_answer_box" :id="'q'+item.id" v-for="(item,index) in question" v-for-index="index"
					:key="item.id" v-if="index==qaindex">
					<view class="answer_title">{{item.title}}</view>
					<view class="answer_cell" v-if="item.show_type==1">
						<block v-if="item.type==1">
							<view class="answer" v-for="(itema,indexa) in item.option" v-for-index="indexa"
								:key="itema.id">
								<view @click="chaeckRadio(index,indexa)" v-if="item.content_type==1"
									style="display: flex;align-items: center;">
									<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
										color="#666666"></uni-icons>
									<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
									<view style="flex: 1;">{{itema.content}}</view>
								</view>
								<view v-else>
									<image @click="checkImggg(itema.img)" class="choose_img" mode="aspectFill"
										:src="itema.img" v-if="item.content_type==2"></image>
									<video class="choose_img" mode="aspectFill" :src="itema.img"
										v-if="item.content_type==3"></video>
									<view style="display: flex;align-items: center;padding: 20rpx 0;" class=""
										@click="chaeckRadio(index,indexa)">
										<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
											color="#666666"></uni-icons>
										<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
										<view style="flex: 1;">{{itema.content}}</view>
									</view>
								</view>
							</view>
						</block>
						<block v-if="item.type==2">
							<view class="answer" v-for="(itema,indexa) in item.option" :key="itema.id">
								<view @click="chaeckCheckbox(index,indexa,item.num)" v-if="item.content_type==1"
									style="display: flex;align-items: center;">
									<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
										color="#666666"></uni-icons>
									<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
									<view style="flex: 1;">{{itema.content}}</view>
								</view>
								<view v-else>
									<image @click="checkImggg(itema.img)" class="choose_img" mode="aspectFill"
										:src="itema.img" v-if="item.content_type==2"></image>
									<video class="choose_img" mode="aspectFill" :src="itema.img"
										v-if="item.content_type==3"></video>
									<view style="display: flex;align-items: center;padding: 20rpx 0;" class=""
										@click="chaeckCheckbox(index,indexa,item.num)">
										<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
											color="#666666"></uni-icons>
										<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
										<view style="flex: 1;">{{itema.content}}</view>
									</view>
								</view>
							</view>
						</block>
						<view style="display: flex;" v-if="item.type==3">
							<textarea class="text_input" v-model="item.text" @input="bindTextArea(index)"
								placeholder="请输入" maxlength="200" />
						</view>
					</view>
					<view class="answer_cell" v-if="item.show_type==2">
						<block v-if="item.type==1">
							<view class="answer" style="width: 100%;" v-for="(itema,indexa) in item.option"
								:key="itema.id">
								<view @click="chaeckRadio(index,indexa)" v-if="item.content_type==1"
									style="display: flex;align-items: center;">
									<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
										color="#666666"></uni-icons>
									<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
									<view style="flex: 1;">{{itema.content}}</view>
								</view>
								<view v-else>
									<image @click="checkImggg(itema.img)" class="choose_imgL" mode="aspectFill"
										:src="itema.img" v-if="item.content_type==2"></image>
									<video class="choose_imgL" mode="aspectFill" :src="itema.img"
										v-if="item.content_type==3"></video>
									<view style="display: flex;align-items: center;padding: 20rpx 0;" class=""
										@click="chaeckRadio(index,indexa)">
										<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
											color="#666666"></uni-icons>
										<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
										<view style="flex: 1;">{{itema.content}}</view>
									</view>
								</view>
							</view>
						</block>
						<block v-if="item.type==2">
							<view class="answer" style="width: 100%;" v-for="(itema,indexa) in item.option"
								:key="itema.id">
								<view @click="chaeckCheckbox(index,indexa,item.num)" v-if="item.content_type==1"
									style="display: flex;align-items: center;">
									<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
										color="#666666"></uni-icons>
									<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
									<view style="flex: 1;">{{itema.content}}</view>
								</view>
								<view v-else>
									<image @click="checkImggg(itema.img)" class="choose_imgL" mode="aspectFill"
										:src="itema.img" v-if="item.content_type==2"></image>
									<video class="choose_imgL" mode="aspectFill" :src="itema.img"
										v-if="item.content_type==3"></video>
									<view style="display: flex;align-items: center;padding: 20rpx 0;" class=""
										@click="chaeckCheckbox(index,indexa,item.num)">
										<uni-icons v-if="itema.is_check==1" type="circle-filled" size="20"
											color="#666666"></uni-icons>
										<uni-icons v-else type="circle" size="20" color="#666666"></uni-icons>
										<view style="flex: 1;">{{itema.content}}</view>
									</view>
								</view>
							</view>
						</block>
						<view style="display: flex;" v-if="item.type==3">
							<textarea class="text_input" v-model="item.text" @input="bindTextArea(index)"
								placeholder="请输入" maxlength="200" />
						</view>
					</view>
				</view>
				<view class="qalist_bottom">
					<uni-row :gutter="20">
						<uni-col v-if="qaindex>0" :span="12">
							<view class="voted_btn" @click="beforeQa">上一题</view>
						</uni-col>
						<uni-col v-if="qaindex<qatotal" :span="qaindex==0?'24':'12'">
							<view class="voted_btn" @click="nextQa">
								下一题</view>
						</uni-col>
						<uni-col v-if="qaindex==qatotal" :span="12">
							<view class="voted_btn" @click="postVote">
								{{info.button?info.button:'提交'}}
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view class="weui-mask" v-if="showModal" @click="closeModal"></view>
		<view class="qrcode_box" v-if="showModal">
			<view class="pop_text">
				<text>{{info.pop_title}}</text>
			</view>
			<view class="pop_text">
				<text>{{info.pop_text}}</text>
			</view>
			<view class="pop_btn_flex">
				<view class="pop_left_btn" @click="closeModal">{{info.pop_button_left}}</view>
				<view class="pop_right_btn" @click="submitQa">{{info.pop_button_right}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getQaList,
		postQa
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				stage_id: 0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				pageTop: uni.getSystemInfoSync().statusBarHeight + 52,
				qainfo: '',
				info: '',
				question: [],
				ques: [],
				count: 1,
				showModal: false,
				qaindex: 0,
				qatotal: 0,
				channel: '',
				startTime: 0,
				timerId: '',
				seconds: 0,
				isSubmit:true,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {
			if (uni.getStorageSync('onload')) {
				this.getQaInfo()
				this.getQaList()
				uni.removeStorage({
					key: 'onload',
				})
			}
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}

		},
		onLoad(options) {
			this.channel = options.channel ? options.channel : ''
			this.subject_id = options.subject_id
			this.stage_id = options.stage_id
			if (uni.getStorageSync('access_token')) {
				this.getQaInfo()
				this.getQaList()
			}
			clearInterval(this.timerId);
			this.startTime = Date.now();
			this.timerId = setInterval(this.updateTime, 1000);
		},
		onHide() { //小程序进入后台
			console.log('===onHide===')
		},
		onUnload() { //关闭当前页面
			console.log('===onUnload===')
			clearInterval(this.timerId);
		},
		methods: {
			// 更新时间的函数
			updateTime() {
				let elapsedTime = (Date.now() - this.startTime) / 1000;
				this.seconds = elapsedTime.toFixed(0);
			},
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.qainfo = res.data
						uni.setNavigationBarTitle({
							title: res.data.top
						})
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getQaList() {
				getQaList({
					channel: this.channel,
					subject_id: this.subject_id,
					stage_id: this.stage_id,
				}).then(res => {
					if (res.state == 1) {
						var question = res.data.question
						for (var i = 0; i < question.length; i++) {
							question[i].count = 1
							if (question[i].type == 3) {
								question[i].option[0].is_check = 1
							}
						}
						this.info = res.data
						this.question = question
						this.qatotal = question.length - 1
						this.qaindex = 0

						var params = {
							event_code: '答题列表-' + res.data.title,
							event_id: res.data.id,
							title: res.data.title,
							value: '',
							path: 'pages/qa/qalist/qalist',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			beforeQa() {
				this.qaindex = this.qaindex - 1
				var params = {
					event_code: this.info.title + '-上一题',
					event_id: this.question[this.qaindex].id,
					title: this.question[this.qaindex].title,
					value: '',
					path: 'pages/qa/qalist/qalist',

				}
				app.BurialPoint(params)

			},
			nextQa() {
				var question = this.question
				var optionlist = question[this.qaindex].option
				var tmp = optionlist.some(val => {
					return val.is_check == 1;
				})
				if (tmp) {
					this.qaindex = this.qaindex + 1
					var params = {
						event_code: this.info.title + '-下一题',
						event_id: question[this.qaindex].id,
						title: question[this.qaindex].title,
						value: '',
						path: 'pages/qa/qalist/qalist',
					}
					app.BurialPoint(params)
				} else {
					if (question[this.qaindex].type == 3) {
						uni.showToast({
							icon: 'none',
							title: '请填写' + question[this.qaindex].title,
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '请完成:' + question[this.qaindex].title,
						})
					}
					return false
				}
			},
			chaeckRadio(index, indexa) {
				var option = this.question[index].option
				var question = this.question
				for (var i = 0; i < option.length; i++) {
					if (i == indexa) {
						question[index].option[i].is_check = 1
						var relation = question[index].option[i].relation
						this.question = []
						this.question = question
					} else {
						question[index].option[i].is_check = 0
						this.question = []
						this.question = question
					}
				}
			},
			chaeckCheckbox(index, indexa, num) {
				if (this.question[index].option[indexa].is_check == 1) {
					var question = this.question
					question[index].option[indexa].is_check = 0
					question[index].count = question[index].count - 1
					this.question = []
					this.question = question
				} else {
					if (num > 0) {
						var question = this.question
						if (num > question[index].count || num == question[index].count) {
							question[index].count = question[index].count + 1
							question[index].option[indexa].is_check = question[index].option[indexa].is_check ==
								1 ? 0 : 1
							this.question = []
							this.question = question
						}
					} else {
						var question = this.question
						question[index].option[indexa].is_check = question[index].option[indexa].is_check == 1 ?
							0 : 1
						this.question = []
						this.question = question
					}
				}

			},
			bindTextArea(index) {
				var question = this.question
				question[index].text = e.detail.value
				question[index].option[0].is_check = 1
				this.question = []
				this.question = question
			},
			closeModal() {
				this.showModal = false
			},
			postVote() {
				var question = this.question
				var ques = []
				for (var i = 0; i < question.length; i++) {
					var params = {}
					params.q_id = question[i].id
					var optionlist = question[i].option

					var option = []
					if (question[i].is_required == 1) {
						if (!question[i].show) {

							var tmp = optionlist.some(val => {
								return val.is_check == 1;
							})
						} else {
							var tmp = true
						}
					} else {
						var tmp = true
					}


					if (tmp) {
						if (question[i].type == 1) {
							for (var j = 0; j < optionlist.length; j++) {
								if (optionlist[j].is_check == 1) {
									option.push(optionlist[j].id)
									params.option = option
								}
							}
						} else if (question[i].type == 2) {
							for (var j = 0; j < optionlist.length; j++) {
								if (optionlist[j].is_check == 1) {
									option.push(optionlist[j].id)
									params.option = option
								}
							}
						} else if (question[i].type == 3) {
							params.text = question[i].text
						}
					} else {
						if (question[i].type == 3) {
							uni.showToast({
								icon: 'none',
								title: '请填写' + question[i].title,
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '请完成:' + question[i].title,
							})
						}
						return false
					}
					ques.push(params)
				}
				this.showModal = true

			},
			submitQa() {
				var that = this
				var question = that.question
				console.log(question)
				
				var ques = []
				for (var i = 0; i < question.length; i++) {
					var params = {}
					params.q_id = question[i].id
					var optionlist = question[i].option

					var option = []
					if (question[i].is_required == 1) {
						if (!question[i].show) {

							var tmp = optionlist.some(val => {
								return val.is_check == 1;
							})
						} else {
							var tmp = true
						}
					} else {
						var tmp = true
					}


					if (tmp) {
						if (question[i].type == 1) {
							for (var j = 0; j < optionlist.length; j++) {
								if (optionlist[j].is_check == 1) {
									option.push(optionlist[j].id)
									params.option = option
								}
							}
						} else if (question[i].type == 2) {
							for (var j = 0; j < optionlist.length; j++) {
								if (optionlist[j].is_check == 1) {
									option.push(optionlist[j].id)
									params.option = option
								}
							}
						} else if (question[i].type == 3) {
							params.text = question[i].text
						}
					} else {
						if (question[i].type == 3) {
							uni.showToast({
								icon: 'none',
								title: '请填写' + question[i].title,
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '请完成:' + question[i].title,
							})
						}
						return false
					}
					ques.push(params)
				}
				clearInterval(that.timerId);
				let elapsedTime = ((Date.now() - that.startTime) / 1000).toFixed(3);
				console.log('总计用时==' + elapsedTime)
				var paramsd = {
					channel: that.channel,
					subject_id: parseInt(that.subject_id),
					stage_id: parseInt(that.stage_id),
					question: ques,
					time: elapsedTime
				}
				console.log(paramsd)
				if(that.isSubmit){
					console.log('')
					that.isSubmit=false
					postQa(paramsd).then(res => {
						if (res.state == 1) {
							that.showModal=false
							uni.redirectTo({
								url: '/pages/qa/qaresult/qaresult?subject_id=' + that.subject_id +
									'&stage_id=' + that.stage_id + '&channel=' + that.channel,
							})
							setTimeout(function(){
								that.isSubmit=true
							},1000)
						} else {
							that.showModal=false
							that.isSubmit=true
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				}
				
				var params = {
					event_code: '答题列表',
					path: 'pages/qa/qalist/qalist',
					event_id: that.subject_id,
					title: that.info.title,
					source_page: '答题列表-提交',
					value: '',
				}
				app.BurialPoint(params)

			},
			checkImggg(img) {
				uni.previewImage({
					current: img, // 当前显示图片的 http 链接
					urls: [img] // 需要预览的图片 http 链接列表
				})
			},
			goPage() {
				if (this.qainfo.path_type == 'switchTab') {
					uni.switchTab({
						url: this.qainfo.path_url,
					})
				} else if (this.qainfo.path_type == 'navigateTo') {
					uni.navigateTo({
						url: this.qainfo.path_url,
					})
				} else if (this.qainfo.path_type == 'reLaunch') {
					uni.reLaunch({
						url: this.qainfo.path_url,
					})
				} else if (this.qainfo.path_type == 'redirectTo') {
					uni.redirectTo({
						url: this.qainfo.path_url,
					})
				}
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.qainfo.title ? this.qainfo.title : '答题',
				imageUrl: this.qainfo.share_img ? this.qainfo.share_img : '',
				path: '/pages/qa/qastart/qastart?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.qalist_pages {
		padding: 30rpx;

		.vote_info {
			padding: 30rpx;
			background-color: #FFFFFF;
		}

		.qalist_xiong_box {
			position: relative;
			text-align: center;
			z-index: 1;

			.xiong1 {
				width: 125rpx;
				height: 101rpx;
				vertical-align: middle;
			}

			.xiong2 {
				width: 125rpx;
				height: 100rpx;
				vertical-align: middle;
			}

			.xiong3 {
				width: 105rpx;
				height: 129rpx;
				vertical-align: middle;
			}
		}

		.qalist_block_top_box {
			margin-top: -20rpx;
			border-radius: 8rpx;

			.qalist_block_title {
				color: #FFFFFF;
				width: 100%;
				height: 98rpx;
				color: #ffffff;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #00A0DC;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				position: relative;

				.time_box {
					position: absolute;
					right: 30rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.time_badge {
						color: #FFFFFF;
						font-size: 22rpx;
						margin-left: 6rpx;
						padding: 4rpx 9rpx;
						border-radius: 20rpx;
						text-align: center;
						background-color: #F32424;
					}
				}
			}

			.qalist_block_desc {
				color: #666666;
				font-size: 26rpx;
				letter-spacing: 2rpx;
				padding: 40rpx;
				background-color: #ffffff;
				border-bottom-left-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
			}
		}

		.rank_popup_link_box {
			padding: 0 115rpx;
			margin-top: -13rpx;

			.rank_popup_link {
				width: 100%;
				vertical-align: middle;
			}
		}

		.qalist_answer_box {
			padding: 63rpx 50rpx;
			min-height: 35vh;
			margin-top: -13rpx;
			border-radius: 8rpx;
			background-color: #FFFFFF;
		}

		.answer {
			color: #666666;
			font-size: 26rpx;
			width: 50%;
			padding-right: 0;
			letter-spacing: 2rpx;
			margin-bottom: 0;
			padding: 20rpx 0;
			display: inline-block;
			align-items: center;
		}

		.answer_title {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
		}

		.answer_cell {
			margin-top: 20rpx;
		}

		.choose_img {
			width: 240rpx;
			height: 240rpx;
			margin-left: 0;
		}

		.choose_imgL {
			width: 500rpx;
			height: 240rpx;
			margin-left: 0;
		}

		.qalist_bottom {
			// padding-top: 120rpx;
			padding-top: 10%;
			// padding: 10% 0;
		}

		.voted_btn {
			width: 100%;
			color: #FFFFFF;
			font-size: 36rpx;
			padding: 28rpx 0;
			text-align: center;
			border-radius: 8rpx;
			background-color: #00A0DC;
			letter-spacing: 10rpx;
		}
	}
</style>